<template>
  <!-- 头部组件 -->
  <div class="HeaderView">
    <div class="title">
      <img src="../../assets/images/comps/1.png"
           width="225px"
           height="100%" />
    </div>

    <div class="userNameWrap">
      <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: headerList.fapath }">{{headerList.fameta}}</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: headerList.chpath }">{{headerList.chmeta}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="loginout">
        <span>欢迎您，{{userName}}</span>
        <span style="cursor: pointer;"
              @click="logout()">退出</span>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: 'HeaderView',
  props: ['auth'],
  data () {
    return {
      userName: '',
      index: null,
      currentRoute: this.$router.currentRoute,
      headerList: {
        fameta: '',
        fapath: '',
        chmeta: '',
        chpath: ''
      }
    }
  },
  created () {
    this.getUserName()
    this.headerList.fameta = this.currentRoute.matched[0].meta
    this.headerList.fapath = this.currentRoute.matched[0].redirect
    this.headerList.chmeta = this.currentRoute.meta
    this.headerList.chpath = this.currentRoute.path
  },
  watch: {
    '$route.path': function (newVal, oldVal) {
      // console.log('$route.path', this.$router)
      this.headerList.fameta = this.$router.currentRoute.matched[0].meta
      this.headerList.fapath = this.$router.currentRoute.matched[0].redirect
      this.headerList.chmeta = this.$router.currentRoute.meta
      this.headerList.chpath = this.$router.currentRoute.path
    }
  },
  methods: {
    // 退出登录
    logout () {
      console.log('登出')
      // this.$bus.$emit('auth.logout')
      document.cookie = 'userName=' + ''
      this.$router.push('/login')
    },
    getUserName () {
      var userName = this.getCookie('userName')
      this.userName = userName
    },
    getCookie (cookieName) {
      var allcookies = document.cookie
      // 索引长度，开始索引的位置
      var cookiePos = allcookies.indexOf(cookieName)

      // 如果找到了索引，就代表cookie存在,否则不存在
      if (cookiePos !== -1) {
        // 把cookie_pos放在值的开始，只要给值加1即可
        // 计算取cookie值得开始索引，加的1为“=”
        cookiePos = cookiePos + cookieName.length + 1
        // 计算取cookie值得结束索引
        var cookieEnd = allcookies.indexOf(';', cookiePos)

        if (cookieEnd === -1) {
          cookieEnd = allcookies.length
        }
        // 得到想要的cookie的值
        var value = unescape(allcookies.substring(cookiePos, cookieEnd))
      }
      return value
    }
  }
}
</script>

<style scoped>
.HeaderView {
  width: 100%;
  height: 80px;
  background: #003a62;
  display: flex;
  justify-content: space-between;
  /* font-family: "PingFangSC-Light", "Microsoft YaHei", "Microsoft YaHei UI",
    "helvetica", "arial", "sans-serif"; */
}
.userNameWrap {
  height: 80px;
  line-height: 80px;
  width: 100%;
  /* margin-top: 15px;
  padding-right: 20px; */
  color: #ffffff;
}
.breadcrumb {
  margin-left: 20px;
  float: left;
}
.breadcrumb div {
  height: 80px;
  line-height: 80px;
}
.loginout {
  float: right;
  margin-right: 20px;
}
.title {
  color: #ffffff;
  background: #005b88;
  box-sizing: border-box;
}
</style>
<style>
.el-breadcrumb__item span {
  color: #ffffff !important;
}
</style>
